<template>
  <!-- 头像部分 -->
  <div class="logo" :class="{ 'logo-collapsed': state.collapsed }" @click.stop>
    <img
      class="logo-png"
      :class="{ 'logo-png-collapsed': state.collapsed }"
      src="../assets/logo.png"
      alt="logo"
    />
    <span class="logo-word" v-if="!state.collapsed">Admin Pro</span>
  </div>
  <a-menu
    v-model:selectedKeys="state.selectedKeys"
 
    :items="routerStore.menuArr"
    theme="dark"
    mode="inline"
    :inline-collapsed="state.collapsed"
    @click="handleMenuClick"
  >
  </a-menu>
</template>

<script setup>
import { reactive, watch, h } from "vue";
import { PieChartOutlined } from "@ant-design/icons-vue";
import { useRouterStore } from "../store/StoreMenu";
import { storeToRefs } from "pinia";

const routerStore = useRouterStore();
const { menuArr, selectKeys } = storeToRefs(routerStore);

function convertIcons(menu) {
  menu.forEach(item => {
    item.icon = () => h(PieChartOutlined);
    if (item.children) {
      convertIcons(item.children);
    }
  });
}

convertIcons(menuArr.value);

const state = reactive({
  collapsed: false,
  selectedKeys: [routerStore.activeKey.value],
  openKeys: [],
});

watch(() => [routerStore.activeKey, selectKeys], ([newActiveKey, newSelectKeys]) => {
  state.selectedKeys = [newActiveKey];
  state.openKeys = newSelectKeys;
});

function handleMenuClick({ key }) {
  routerStore.changeActiveRoute(key);
}
</script>

<style>
:root {
  --primary-color: #1890ff;
  --secondary-color: #fff;
  --tertiary-color: #fff;
  --font-size-large: large;
  --font-size-medium: medium;
  --font-size-small: small;
  --border-radius: 50%;
  --icon-size: 24px;
  --padding-small: 8px;
  --padding-medium: 12px;
  --margin-small: 4px;
  --transition-duration: 0.3s;
}

.logo {
  display: flex;
  align-items: center;
  height: 48px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: -10px;
  /* 使其无法点击 */
  pointer-events: none;
  margin-left: 20px;
  padding-left: 10px;
}

.logo-png {
  width: 38px;
  margin-right: 16px;
  transition: margin var(--transition-duration);
  margin-left: -10px;
  padding-left: 0px;
}

:where(.css-dev-only-do-not-override-19iuou).ant-menu-inline.ant-menu-root
  .ant-menu-item
  > .ant-menu-title-content,
:where(.css-dev-only-do-not-override-19iuou).ant-menu-inline.ant-menu-root
  .ant-menu-submenu-title
  > .ant-menu-title-content {
  flex: auto;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: visible !important;
}

.logo-word {
  color: var(--secondary-color);
  font-size: 20px;
  font-weight: bold;
  color: aliceblue;
  margin-left: 0px;
  padding-left: 0px;
  opacity: 1; /* 默认完全可见 */
  transition: opacity var(--transition-duration); /* 添加过渡效果 */
}

:where(.css-dev-only-do-not-override-19iuou).ant-menu-dark {
  margin-top: -40px;
}
</style>
